<template>
  <div class="vehicle-monitor-panel">
    <div class="panel-title">
      车辆监测 
    </div>
    <div class="panel-content">
      <div class="table-container">
        <table class="vehicle-table">
          <thead>
            <tr>
              <th>隧道名称</th>
              <th>危化车</th>
              <th>大货车</th>
              <th>中货车</th>
              <th>小货车</th>
              <th>大客车</th>
              <th>小客车</th>
              <th>隧道类型</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, idx) in tableData" :key="idx">
              <td>{{ item.tunnelName }}</td>
              <td>{{ item.dangerTruck }}</td>
              <td>{{ item.largeTruck }}</td>
              <td>{{ item.mediumTruck }}</td>
              <td>{{ item.smallTruck }}</td>
              <td>{{ item.largeBus }}</td>
              <td>{{ item.smallBus }}</td>
              <td>{{ item.tunnelType }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
const tableData = reactive([
  { tunnelName: '太平隧道', dangerTruck: 1000, largeTruck: 2100, mediumTruck: 5000, smallTruck: 6000, largeBus: 8000, smallBus: 10000, tunnelType: '特长隧道' },
  { tunnelName: '石龙隧道', dangerTruck: 1000, largeTruck: 2100, mediumTruck: 5000, smallTruck: 6000, largeBus: 8000, smallBus: 10000, tunnelType: '隧道群' },
  { tunnelName: '丰岩隧道', dangerTruck: 1000, largeTruck: 2100, mediumTruck: 5000, smallTruck: 6000, largeBus: 8000, smallBus: 10000, tunnelType: '隧道群' },
  { tunnelName: '白云隧道', dangerTruck: 1000, largeTruck: 2100, mediumTruck: 5000, smallTruck: 6000, largeBus: 8000, smallBus: 10000, tunnelType: '特长隧道' },
  { tunnelName: '羊角隧道', dangerTruck: 1000, largeTruck: 2100, mediumTruck: 5000, smallTruck: 6000, largeBus: 8000, smallBus: 10000, tunnelType: '特长隧道' },
]);
</script>

<style lang="scss" scoped>
.vehicle-monitor-panel {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;

  .panel-title {
    background: url("@/assets/image/TunnelOverviewPanel/组 2.png") no-repeat center/cover;
    width: 452px;
    height: 43px;
    padding: 3px 0 25px 30px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    position: relative;
  }

  .panel-content {
    width: 100%;
    background: url("@/assets/image/deviceOverview/1111111111111.png") no-repeat center/cover;
    padding: 16px;
    box-sizing: border-box;
  }

  .table-container {
    width: 100%;
    overflow-x: hidden;
  }
  
  .vehicle-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    table-layout: fixed;
  
    th, td {
      padding: 8px 0;
      text-align: center;
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 15px;
      font-family: inherit;
      background: transparent;
      transition: background 0.2s;
      font-weight: normal;
      letter-spacing: 0;
      white-space: normal;
    }
    
    th {
      background: none;
      color: #fff;
      font-size: 15px;
      font-weight: normal;
    }
    
    th:nth-child(1), td:nth-child(1) { width: 90px; min-width: 90px; }
    th:nth-child(2), td:nth-child(2),
    th:nth-child(3), td:nth-child(3),
    th:nth-child(4), td:nth-child(4),
    th:nth-child(5), td:nth-child(5),
    th:nth-child(6), td:nth-child(6),
    th:nth-child(7), td:nth-child(7) { width: 70px; min-width: 70px; }
    th:nth-child(8), td:nth-child(8) { width: 90px; min-width: 90px; }
  }
}
</style> 